<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<link href="../../../element/index.css" rel="stylesheet" />
	<script src="../../../js/vue.js"></script>
	<script src="../../../element/index.js"></script>
	<script src="../../../js/axios.js"></script>
	<script src="../../../js/gsaucommon.js"></script>
		<title></title>
		<style>
		*{
			margin: 0; 
			padding: 0;
		}
		#app{
			width: 1200px;
			margin: 30px auto;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.el-header{
			margin-top:10px ;
			height: 300px;
		}
		.name{
			height:50px;
			position: sticky; 
			top: 0px;  
			z-index: 999;
			background-color: white;
			border: 2px solid #F8F8FF;
			margin-top: 0px;
		}
		.title{
			width: 250px;
			height: 40px;
			margin-top:15px;
			text-align: center;
		}
		.add-data{
			width: 150px;
			height: 40px;
			margin-top:8px;
			margin-left: 35px;
		}
		.search{
			width: 230px;
			height: 40px;
			margin-top: 7px;
			font-size:15px;
		}
		.search_span{
			font-size:15px;
			padding-left: 50px;
			margin-top: 15px;
		}
		.status{
			width: 350px;
			margin-top: 7px;
			height: 40px;
			font-size:15px;
		}
		.search-icon{
			width: 600px;
			margin-top: 15px;
			height: 40px;
			font-size:15px;	
		}
		.el-main{
		}
		.main_text{
			width: 1100px;
			margin: 0 auto;
		}
		.el-footer{
			height: 40px;
		}
		.page{
			width: 550px;
			margin: 15px auto;
		}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="name">
					<el-row>
						<el-col :span="24">
							<div class="title"><h3>教材与专著管理-审核</h3></div>
						</el-col>
						<!-- <el-col :span="1">
							<div class="add-data"><el-button type="primary" @click="add">添加</el-button></div>
						</el-col> -->
					</el-row>

				</el-header>
				<!-- 页眉 -->
				<el-header>
					
					<el-row>
						<el-col :span="2">
							<div class="search_span">名称：</div>
						</el-col>
						<el-col :span="19">
						 <div class="search">
							  <el-input v-model="form.search_message"  placeholder="请输入关键词">  </el-input>
						 </div>
						</el-col>
						
						<el-col :span="3">
							<div class="search-icon"><el-button type="primary" size="small" icon="el-icon-search" 
							@click="searchByKeyAndNode(form.search_message)">搜索</el-button></div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 正文 -->
				<el-main>
					<el-row>
						<el-col :span="24">
							<div class="main_text">
								<template>
								  <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
								  stripe border style="width: 100%" highlight-current-row >
									<el-table-column fixed prop="id" label="序号" type="index" width="50"></el-table-column>
									<el-table-column prop="tianbaoName" label="提交人" width="80"></el-table-column>
								    <!-- <el-table-column fixed prop="tianbaoName" label="填报人"  width="80"></el-table-column> -->
								    <el-table-column prop="bookName" label="名称" width="380"></el-table-column>
								    <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
									<el-table-column prop="status" label="流程状态" width="100"></el-table-column>
									<el-table-column prop="node" label="当前节点" width="100"></el-table-column>
									<!-- <el-table-column prop="process_class" label="项目类别" width="140"></el-table-column> -->
								    <el-table-column fixed="right" label="操作" width="150" >
								      <template slot-scope="scope">
								        <!-- <el-button @click="handleUpdate(scope.row)" type="primary" size="mini">修改</el-button> -->
								        <!-- <el-button @click="handleDelete(scope.row)" type="primary" size="mini">删除</el-button> -->
										<el-button type="primary" size="mini" @click="chaKan(scope.row)">查看</el-button>
								      </template>
								    </el-table-column>
								  </el-table>
								</template>
							</div>
						</el-col>
					</el-row>
				</el-main>
				<!-- 页尾 -->
				<el-footer>
					<el-row>
						<el-col :span="24">
							  <div class="page">
								<!--  -->
								
							    <el-pagination 
								@size-change="handleSizeChange"
								@click="change_page(index)" 
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-size="pagesize"
								:page-sizes="[page_sizes]" 
								layout="total, sizes, prev, pager, next, jumper"
								:total="tableData.length" 
								:background="true" >
								</el-pagination>
							  </div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
		</div>
	</body>
</html>
<script>
	//3:由Vue挂载elements
	new Vue({
		el:"#app",
		data:{
			page_sizes:5, //每页的数据
			currentPage: 1,//第几页
			currentIndex: '',
			pagesize: 5,
			tableData: [1],
			search_options:[{
				value:'tableData.project',
			}],
			status:[],
			status1:[],
			form:{
				status:"",
				search_message:""
			},
			pageitems:{
				page:"",
				rows:""
			}
		},
		
		methods: {
			
			chaKan(row){
				window.location="chakanshenhejiaocaizhuanzhu.html"
				localStorage.setItem("id",row.id)
			},
			add:function(){
				window.location="addJiaoCaiYuZhuanZhu.html"
			},
			
			searchByKeyAndNode(){
				if(this.form.search_message!=""){
					this.currentPage = 1
					axios.get(window.gsau+"jiaocaizhuanzhu/searchbykeywordandnode/"+this.form.search_message).then((res)=>{
						this.tableData = res.data.data
					})
				}else{
					this.$message.error("请添加搜索名称")
				}
			},
			//每页显示的数据
			handleSizeChange(val) {
			    console.log(`每页 ${val} 条`);
				this.page_sizes = val
				this.getpagedata(val,1)
				this.currentPage = 1
			},
			//显示第几页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getpagedata(this.page_sizes,val)
			},
			getpagedata:function(item1,item2){
				this.pageitems.page = item2
				this.pageitems.rows = item1
				console.log(this.pageitems)
				console.log(this.form)
				axios.post(window.gsau+"jiaocaizhuanzhu/findandpage",this.pageitems).then((res)=>{
					console.log(res)
				})
				
			},
			
			findByNode(){
				axios.get(window.gsau+"jiaocaizhuanzhu/findbynode").then((res)=>{
					console.log(res)
					this.tableData = res.data.data
				})
			},
			handleDelete:function(row){
				this.$confirm("确认删除该条数据吗？","提示",{type:'info'})
				        .then(()=>{
				            //2.做删除业务
							console.log(row)
							console.log(row.id)
				            axios.delete(window.gsau+'jiaocaizhuanzhu/delete/'+row.id)
				                .then((res)=>{
				                    if(res.data.code==20010){
				                        this.$message.success("删除成功")
										
				                    }else{
				                        this.$message.error("删除失败")
				                    }
				                }).finally(()=>{
				                    this.findByNode()
									this.getpagedata(this.page_sizes,this.currentPage)
				                })
				        }).catch(()=>{
				            //3.取消删除
				            this.$message.info("取消删除操作")
				        })
			},
			handleUpdate:function(row){
				window.location="updatejiaocaizhuanzhu.html"
				localStorage.setItem("id",row.id)
			},
			findstatus:function(){
				axios.get(window.gsau+"status/findall").then((res)=>{
					console.log(res)
					this.status = res.data.data
				})
			}
		},
		created:function(){
			this.findByNode()
			this.findstatus()
			this.getpagedata(this.page_sizes,this.currentPage)
		},
	})
</script>


